vue 搭建 axios 拦截器

一、axios 中的实例创建

1.1 实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

1.2 request

调用 request 实例方法，可以将指定的配置与实例的配置合并，并发送请求

instance.request({
    url: '/getUserInfo',
    method: 'post',
    data:{}
})

1.3 then

之后调用 then 时，可以接收请求返回的响应

instance.request({
    url: '/getUserInfo',
    method: 'post',
    data:{}
}).then(response => {
  	console.log(response.data)
})

二、在 vue 中使用拦截器

2.1 拦截器

在 vue 中新建一个 request.js 来配置一个 axios 实例和拦截器

vue 中发出去的所有请求都会经过此文件

src/utils/request.js

// 对 axios 发出的请求进行拦截并处理
import axios from 'axios'
import store from '@/store'
import {
  getToken
} from '@/utils/auth'

// 创建 axios 实例
const service = axios.create({
  baseURL: 'http://mock.com', // api 的 base_url
  timeout: 5000 // request timeout
  //   headers: post['Content-Type'] = 'application/json'
})

// 请求拦截
service.interceptors.request.use(config => {
  // 请求发送前的处理
  if (store.getters.token) {
    // 让每个请求携带token-- ['X-Token']为自定义key
    config.headers['X-Token'] = getToken();
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone interceptor
service.interceptors.response.use(
  response => response,
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

该文件最后向外暴露一个 axios 实例 service，调用 service 的 request 方法即可向外发送请求。

2.2 新建 api

新建一个 api 文件夹，将项目所有的请求存放在里面统一管理

// 某一个组件的 api
import request from '@/utils/request'

export function  getInfo1() {
  return request({
    url: '/getInfo1',
    method: 'post',
    data:{}
  })
}

export function getInfo2() {
  return request({
    url: '/getInfo2',
    method: 'post',
    data:{}
  })
}

2.3 组件调用

之后只要在对应组件上调用 api 文件中的方法，即可发送请求

// 引入对应的 function
import { getInfo1, getInfo2 } from "@/api/getInfo";

// 发送
getInfo1().then(res => {
	console.log(res.data);
});
getInfo2().then(res => {
	console.log(res.data);
});

因为 api 函数中返回的是 request ，所以通过 .then 就可以获取到返回的数据